import React, { Component } from 'react';
import "./less/List.less"
import SubjectLogo from '../images/home/subject.png'
import { withStyles } from '@material-ui/core/styles';
import LinearProgress from '@material-ui/core/LinearProgress';
import { withRouter } from 'react-router-dom'
import MuiAlert from '@material-ui/lab/Alert';

const BorderLinearProgress = withStyles((theme) => ({
  root: {
    height: 10,
    borderRadius: 5,
  },
  colorPrimary: {
    backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
  },
  bar: {
    borderRadius: 5,
    backgroundColor: '#2E57FF',
  },
}))(LinearProgress);

class List extends Component {
  state = {
    // 弹框提示
    showAlert: false,
    // 弹框类型
    alertType: "success",
    // 弹框内容
    alertContent: "弹框内容"
  }
  render() {
    return (
      <>
        <ul className="mylist" style={{ paddingBottom: '60px' }}>
          {
            this.props.exemItems.map(item => (
              <li key={item.id}>
                <img src={SubjectLogo} alt="" />
                <section>
                  <h3>{item.title}</h3>
                  <span style={{ display: this.props.btnName === '刷题' ? 'none' : 'block' }}>{item.itemCount}/{item.itemCount}题</span>
                  <BorderLinearProgress style={{ display: this.props.btnName === '刷题' ? 'none' : 'block' }} variant="determinate" value={item.itemCount / item.itemCount * 100} />
                </section>
                <div className="btn" onClick={this.btnClick.bind(this, this.props.btnName, item.actionCode)}>{this.props.btnName}</div>
              </li>
            ))
          }
        </ul>
        <MuiAlert style={{ display: this.state.showAlert ? 'flex' : 'none' }} elevation={6} variant="filled" severity={this.state.alertType} className="my-mui-alert">{this.state.alertContent}</MuiAlert>
      </>
    );
  }
  // 按钮点击，区分是“练习”还是“习题列表”
  btnClick(btnName, actionCode) {
    if (btnName === "练习") {
      // 跳去练习页面
      var query = {
        pathname: `/pratice/${actionCode}`
      }
      this.props.history.push(query);
    } else {
      this.setState({
        showAlert: true,
        alertType: "warning",
        alertContent: "该功能暂未开放"
      }, () => {
        setTimeout(() => {
          this.setState({
            showAlert: false
          })
        }, 2000)
      })
    }
  }
}

export default withRouter(List);
